<template>
  <div>
    <div class="page-content pt-24">
      <div class="layout">
        <div class="left mr-24">
          <div class="ml-16 mb-12">
            <t-tabs
              :tabs="TABS"
              :value="query.type"
              @input="(value, tab) => changeTab(value, tab)"
            />
          </div>

          <no-search-content
            v-if="finished && listData.length === 0"
            class="p-0-16 pt-48"
          />

          <div v-if="listData.length > 0" class="list">
            <news-item
              v-for="(item, index) in listData"
              :key="index"
              :obj="item"
              :is-high-light="true"
            />
          </div>
          <div v-if="total > 0" class="block">
            <pagination
              :current-page.sync="query.pageNum"
              :page-size="15"
              layout="prev, pager, next, jumper"
              :total="total"
              @size-change="val => handlePageChange(val, 'pageSize')"
              @current-change="val => handlePageChange(val, 'pageNum')"
            ></pagination>
          </div>
        </div>
        <div class="right">
          <topic-and-news
            :topic-list="hotTopicList"
            :news-list="latestNewsList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Pagination } from 'element-ui';
import TTabs from '@/components/TTabs.vue';
import TopicAndNews from '@/components/TopicAndNews.vue';
import NewsItem from '@/components/NewsItem.vue';
import 'element-ui/lib/theme-chalk/index.css';
import { NEWS_TYPE } from '@/constants/index.js';
import NoSearchContent from '@/components/NoSearchContent.vue';

const TABS = [
  {
    label: 'all',
    type: 0
  },
  {
    label: 'article',
    value: NEWS_TYPE.ARTICLE
  },
  {
    label: 'video',
    value: NEWS_TYPE.VIDEO
  },
  {
    label: 'vlog',
    value: NEWS_TYPE.VLOG
  }
];

export default {
  name: 'SearchPage',

  components: {
    TTabs,
    NewsItem,
    Pagination,
    TopicAndNews,
    NoSearchContent
  },

  async asyncData({ $API }) {
    const [
      topicRes,
      latestNewsListRes,
    ] = await Promise.all([
      $API.subjectListHots(),
      $API.articleGetLastestNews(),
    ]);

    return {
      hotTopicList: topicRes,
      latestNewsList: latestNewsListRes,
    };
  },

  data() {
    return {
      TABS,
      total: 0,
      hotTopicList: [], // 热门专题
      latestNewsList: [], // 最新资讯
      listData: [],
      finished: false,
      listLoading: false,
      isEmpty: false,
      query: {
        type: 0,
        pageNum: 1,
        pageSize: 15,
        keyword: ''
      }
    };
  },

  watch: {
    '$store.state.app.searchContent': {
      handler: 'search',
      deep: true,
      immediate: true
    }
  },

  methods: {
    search() {
      const { searchContent: keyword } = this.$store.state.app;
      const { type } = this.query;
      this.query = {
        type,
        keyword,
        pageNum: 1,
        pageSize: 15
      };
      this.getList();
    },

    changeTab(value, tab) {
      this.query = {
        ...this.query,
        type: value,
        pageNum: 1
      };
      this.getList();
    },

    async getList() {
      if (this.listLoading) return;
      this.listLoading = true;
      this.finished = false;
      try {
        const { list, total } = await this.$API.articleSearch(this.query);
        this.listData = list || [];
        this.total = Number(total) || 0;
        this.finished = true;
      } catch (e) {
      } finally {
        this.listLoading = false;
      }
    },

    handlePageChange(val, key) {
      this.query[key] = val;
      this.getList();
    },

    highLight(val) {
      if (!val) return ''
      const keyword = this.$store.state.app.searchContent
      if (val.includes(keyword) && keyword !== '') {
        return val.replace(keyword,
        `<font color="#FD4B49">${keyword}</font>`
        )
      }

      return val
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~assets/styles/variable.scss';

.page-content {
  width: $page-width;
  margin: 0 auto;

  .layout {
    display: flex;

    .left {
      width: $page-left-width;
    }

    .right {
      width: $page-right-width;
    }
  }
}

.block {
  border-top: 1px solid rgba(12, 12, 28, 0.08);
  margin: 16px 0;
  padding-top: 16px;
}

.page-content ::v-deep .el-pager li.active {
  color: #fa4646;
}
.page-content ::v-deep .el-pagination__jump {
  float: right;
}
.page-content ::v-deep .el-pagination__editor > .el-input__inner {
  height: 24px;
  background: rgba(12, 12, 28, 0.08);
  border-radius: 8px;
  color: #0c0c1c;
}

.page-content ::v-deep .el-pager {
  .number {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: 12px;
    color: rgba(42, 60, 88, 0.7);
    text-align: center;
    line-height: 24px;
    background: rgba(12, 12, 28, 0.08);
    border-radius: 8px;
    margin: 2px 4px;
  }

  .active {
    background: rgba(250, 70, 70, 0.2);
    color: #fa4646;
  }
}
</style>
